﻿@{
    ViewBag.Title = "User List";
    ViewBag.Header = "User";
    ViewBag.Caption = "Listing";
    ViewBag.AddNewUrl = Url.Action("UserMaintenance", "Users");
    ViewBag.XlsUrl = Url.Action("Export", "User", new { type = "Excel" });
    ViewBag.PdfUrl = Url.Action("Export", "User", new { type = "Pdf" });
    ViewBag.PrintUrl = Url.Action("Print", "User");
}
<div id="listing_User">
    <div class="box">
        <div class="box-body table-responsive">
            <table id="dt_Grid" class="table table-bordered table-striped">
                <thead>
                    <tr>                        
                        <th>Name</th>
                        <th>Gender</th>
                        <th>Present Address</th>
                        <th>Permanent Address</th>
                        <th>Contact Numbers</th>
                        <th>Email</th>
                        <th>&nbsp;</th>
                        <th>&nbsp;</th>                        
                    </tr>
                </thead>
                <tbody id="dt_Rows"></tbody>
            </table>
        </div>
    </div>
</div>

<div id="dialog-confirm" title="Confirm box?">
    <p>
        <span class="ui-icon ui-icon-alert" style="float:left; margin:0 7px 20px 0;">
        </span> Are you sure want to delete?
    </p>
</div>

 <script id="dataTable_Grid" type="text/x-jquery-tmpl">
    <tr>
        <td>${FirstName}, ${LastName}</td>
        <td>${Gender}</td>
        <td>${AddressLine1}</td>
        <td>${AddressLine2}</td>
        <td>${Mobile} <br /> ${Phone}</td>
        <td>${Email} <br /> ${Web}</td>
        <td><a href='@Url.Action("UserMaintenance")?Id=${Id}'>Edit</a></td>
        <td><a id="lnkDelete" href='@Url.Action("Delete")?Id=${Id}'>Delete</a></td>
    </tr>
  </script>

<script type="text/javascript">
        $(document).ready(function () {
            $.getJSON('@Url.Action("GetUsers", "Users")', function (result) {
                $.tmpl($('#dataTable_Grid'), result).appendTo('#dt_Rows');

                $('#dt_Grid').dataTable({
                    "bPaginate": true,
                    "bLengthChange": true,
                    "bFilter": true,
                    "bSort": true,
                    "bInfo": true,
                    "bAutoWidth": false
                });

            });
        });

    </script>

@{
    var message = TempData["AlertMessage"] ?? string.Empty;
}

<script type="text/javascript">
    var message = '@message';
    if(message)
        alert(message);
</script>

<script>
    $(document).ready(function () {
    var url = "";

    if ('@TempData["msg"]' != "") {
    $("#dialog-alert").dialog('open');
    }
    $("#dialog-confirm").dialog({
    autoOpen: false,
    resizable: false,
    height: 170,
    width: 350,
    show: { effect: 'drop', direction: "up" },
    modal: true,
    draggable: true,
    open: function (event, ui) {
    $(".ui-dialog-titlebar-close").hide();

    },
    buttons: {
    "OK": function () {
    $(this).dialog("close");
    window.location.href = url;
    },
    "Cancel": function () {
    $(this).dialog("close");
    }
    }
    });

    $("#lnkDelete").live("click", function (e) {
    // e.preventDefault(); use this or return false
    url = $(this).attr('href');
    $("#dialog-confirm").dialog('open');

    return false;
    });

    });

</script>